<template>
  <div class="pick-info">
    <div style="height: 100%;width: 100%;">
      <div class="truck-info-1 truck-info">
        <div class="truck-info-1-head">
          <span>单号：{{data.orderNo}}</span>
          <span 
            style="float: right;"
            >站点：{{data.siteName}}</span>
        </div>
        <div class="truck-info-1-body">
          <div class="truck">
            <div>
              <div
                class="truck-card"
                style="width: 160px;height: 100px;border-radius: 8px 8px 0 0;overflow: hidden;"
              >
                <el-image
                  style="width: 100%;height: 100%;"
                  fit="cover"
                  :src="data.plateNoPic"
                  :preview-src-list="[data.plateNoPic]"
                >
                </el-image>
              </div>
              <div
                class="truck-card-info"
                style="width: 160px;height: 73px;border-radius: 0 0 8px 8px;background-color: rgba(37, 40, 49, 1);color: white;"
              >
                <div
                  style="height: 34;line-height: 34px;text-align: center;font-size: 14px;"
                >车牌号码</div>
                <div
                  style="font-size: 20px;text-align: center;"
                >
                  <i
                    @click="editTruckId"
                    style="cursor: pointer;"
                    class="el-icon-edit"></i>
                  <span
                    style="margin-left: 5px;width: 100px;display: inline-block;text-align: left;white-space: nowrap;"
                    v-if="truck.flagId">{{data.plateNo}}</span>
                  <input
                    v-if="!truck.flagId"
                    ref="truckId"
                    class="truck-input"
                    v-model="data.plateNo" />
                </div>
              </div>
            </div>
            <div
              style="margin-left: 8px;"
            >
              <div
                class="truck-card"
                style="width: 160px;height: 100px;border-radius: 8px 8px 0 0;overflow: hidden;"
              >
                <el-image
                  style="width: 100%;height: 100%;"
                  fit="cover"
                  :src="data.mileagePic"
                  :preview-src-list="[data.mileagePic]"
                >
                </el-image>
              </div>
              <div
                class="truck-card-info"
                style="width: 160px;height: 73px;border-radius: 0 0 8px 8px;background-color: rgba(37, 40, 49, 1);color: white;"
              >
                <div
                  style="height: 34;line-height: 34px;text-align: center;font-size: 14px;"
                >进场里程（KM）</div>
                <div
                  style="font-size: 20px;text-align: center;"
                >
                  <i
                    @click="editTruckL"
                    style="cursor: pointer;"
                    class="el-icon-edit"></i>
                  <span
                    style="margin-left: 5px;width: 100px;display: inline-block;text-align: left;"
                    v-if="truck.flagL">{{data.mileage}}</span>
                  <input
                    v-if="!truck.flagL"
                    ref="truckL"
                    class="truck-input"
                    v-model="data.mileage" />
                </div>
              </div>
            </div>
              
          </div>
          <div class="repair-kinds">
            <div
              style="display: inline-block;font-size: 14px;line-height: 26px;color: rgba(51, 51, 51, 1);letter-spacing: -1px;"
              >维修类别</div>
            <div
              @click="addRepairType"
              class="btn-kinds add-kinds-btn"><i class="el-icon-plus" ></i>&nbsp;添加
            </div>
            <div v-for="(item,index) in data.repairType" :key="index" style="display: inline-block;">
              <div 
                v-if="index < 2" 
                class="btn-kinds other-kinds-btn"
                >{{item.name}}</div>
            </div>
            <!-- <div class="btn-kinds other-kinds-btn">上装维修</div> -->
            <div
              v-if="data.repairType != null && data.repairType.length > 2"
              @click="showMore"
              style="margin-left: 18px;width: 35px;height: 28px;display: inline-block;line-height: 28px;color: rgba(250, 140, 22, 1);cursor: pointer;"
            >···
              <img
                style="position: relative;top: 3px;"
                src="../../../assets/images/right.svg"/>
            </div>
          </div>
          <div class="appear">
            <div style="font-size: 14px;margin-top: 10px; width: 60px;letter-spacing: -1px;display: inline-block;">结算方式</div>
            <!-- <div style="font-size: 14px;margin-top: 15px;float: right;color: rgba(51, 51, 51, 0.8);">{{data.outgoingNo}}</div> -->
            <div style="margin-top: 10px;display: inline-block;margin-left: -8px;">
              <div
                @click="addRepairPayment"
                class="btn-kinds add-kinds-btn"><i class="el-icon-plus" ></i>&nbsp;添加
              </div>
              <div v-for="(item,index) in data.repairPayment" :key="index" style="display: inline-block;">
                <div 
                  class="btn-kinds other-kinds-btn"
                  >{{item.name}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="truck-info-2 truck-info">
        <table
          cellspacing="0"
          style="margin: 12px;"
        >
          <tr height="31">
            <td class="table-key">进场时间：</td>
            <td class="table-value">{{data.createTime}}</td>
          </tr>
          <tr height="31">
            <td class="table-key">出场时间：</td>
            <td class="table-value">{{data.outTime}}</td>
          </tr>
          <tr height="31">
            <td
              style="letter-spacing: 4px;"
              class="table-key">修车人：</td>
            <td class="table-value">{{data.carPickerName}}&nbsp;{{data.phone}}</td>
          </tr>
          <tr height="31">
            <td
              style="letter-spacing: 4px;"
              class="table-key">接车人：</td>
            <td class="table-value">{{data.carPickerName}}&nbsp;{{data.phone}}</td>
          </tr>
        </table>
      </div>
      <div class="truck-info-3 truck-info">
        <div 
          v-if="data.isMotorVehicle"
          @click="truckInfo"
          style="margin: 8px 115px;color: rgba(250, 140, 22, 0.8);font-size: 14px;cursor: pointer;">
          <i class="el-icon-warning-outline"></i>
          <span
            style="margin-left: 10px;"
          >查看车辆档案</span>
          <img
            style="position: relative;top: 4px;left: 2px;"
            src="../../../assets/images/right.svg" />
        </div>
        <div 
          v-else
          style="margin: 10px 115px;color: rgba(153, 153, 153, 1);font-size: 14px;">
          <i class="el-icon-warning-outline"></i>
          <span
            style="margin-left: 10px;"
          >查看车辆档案</span>>>
        </div>
      </div>
      <div class="truck-info-btn">
        <el-button
          @click="savePickInfo"
          style="background-color: rgba(250, 140, 22, 1);color: white;width: 100%;height: 47px;font-size: 18px;"
        >提交</el-button>
      </div>
    </div>
    
    
    <div class="repair-type-pay-add" v-if="isAddRepairType || isAddPayment || showMoreInfo">
      <div style="height: 190px;" @click="closeAdd"></div>
      <div class="show-add">
        <div style="margin-bottom: 8px;">
          <div style="display: inline-block;" v-for="(item,index) in showAdd" :key="index" @click="pick(item)">
            <div 
              v-if="item.isPick || item.isPick == null" 
              class="btn-kinds add-repair-type-btn-pick">{{item.name}}</div>
            <div 
              v-else 
              class="btn-kinds add-repair-type-btn-no-pick">{{item.name}}</div>
          </div>
        </div>
        <div>
          <el-button
            v-if="isAddRepairType"
            @click="add(true)"
            style="background-color: rgba(250, 140, 22, 1);border-radius: 8px;width: 290px;margin-left: 17px;color: white;font-size: 18px;">添加维修类别</el-button>
          <el-button
            v-else-if="isAddPayment"
            @click="add(false)"
            style="background-color: rgba(250, 140, 22, 1);border-radius: 8px;width: 290px;margin-left: 17px;color: white;font-size: 18px;">添加结算方式</el-button>
        </div>
      </div>
      <div style="height: 378px;" @click="closeAdd"></div>
    </div>
	</div>
</template>

<script>
	import $ from 'jquery'
  import {addRepairType,addPayment,updateJc} from '@/api/workspace/work_order'
	export default {
		props:{
			data:Object,
			id:String
		},
		data(){
			return {
				plateNoPic:[],
				mileagePic:[],
				truck:{
					flagId:true,
					flagL:true
				},
        repairType:[],
        payment:[],
        showAdd:[],
        isAddRepairType:false,
        isAddPayment:false,
        showMoreInfo:false
			}
		},
		created() {
			// console.log(this.data)
      this.load();
		},
		mounted() {
		},
		methods:{
      load:function() {
        var that = this;
        addRepairType({}).then(response => {
          var _data = response.data;
          // console.log(_data)
          if(_data.status == 200) {
            var addRepairType = that.data.repairType;
            var repairType = _data.data;
            var index = 0;
            // console.log(addRepairType)
            for(let i = 0;i < repairType.length;i ++) {
              if(addRepairType != null && index < addRepairType.length && repairType[i].id == addRepairType[index].id){
                index ++;
                repairType[i].isPick = true;
              }else {
                repairType[i].isPick = false;
              }
            }
            that.repairType = repairType;
            // console.log(repairType)
          }
        })
        
        addPayment({}).then(response => {
          var _data = response.data;
          // console.log(_data)
          if(_data.status == 200) {
            var addPayment = that.data.repairPayment;
            var payment = _data.data;
            var index = 0;
            for(let i = 0;i < payment.length;i ++) {
              if(addPayment != null && index < addPayment.length && payment[i].id == addPayment[index].id){
                index ++;
                payment[i].isPick = true;
              }else {
                payment[i].isPick = false;
              }
            }
            if(index == 0) {
              payment[0].isPick = true;
              payment[4].isPick = true;
            }
            that.payment = payment;
            // console.log(payment)
          }
        })
      },
			editTruckId:function(){
				this.truck.flagId = false;
				var that = this;
				setTimeout(function () {
					$(that.$refs.truckId).focus();
					$(that.$refs.truckId).blur(function(){
						console.log("修改车牌号")
					})
				},10)
			},
			editTruckL:function(){
				this.truck.flagL = false;
				var that = this;
				setTimeout(function () {
					$(that.$refs.truckL).focus();
					$(that.$refs.truckL).blur(function(){
						console.log("修改里程")
					})
				},10)
			},
			truckInfo:function(){
				this.$emit('toTruckInfo')
			},
      addRepairType:function() {
        this.isAddRepairType = true;
        this.showAdd = this.repairType;
      },
      addRepairPayment:function() {
        this.isAddPayment = true;
        this.showAdd = this.payment;
      },
      pick:function(item) {
        if(this.isAddPayment) {
          var pay = this.payment;
          if(item.id <= 4) {
            for(var i = 0;i < 4;i ++) {
              if(pay[i].id == item.id) {
                pay[i].isPick = true;
              }else {
                pay[i].isPick = false;
              }
            }
          }else {
            for(var j = 4;j < 8;j ++) {
              if(pay[j].id == item.id) {
                pay[j].isPick = true;
              }else {
                pay[j].isPick = false;
              }
            }
          }
        }else {
          item.isPick = !item.isPick;
        }
      },
      closeAdd:function() {
        this.isAddRepairType = false;
        this.showMoreInfo = false;
        this.isAddPayment = false;
      },
      add:function(flag) {
        var data = [];
        for(var item of this.showAdd) {
          if(item.isPick) {
            data.push(item);
          }
        }
        if(flag) {
          this.data.repairType = data;
        }else {
          this.data.repairPayment = data;
          // console.log(this.data)
        }
        
        this.closeAdd();
        
      },
      showMore:function() {
        this.showAdd = this.data.repairType;
        this.showMoreInfo = true;
      },
      savePickInfo:function() {
        var that = this;
        var data = this.data;
        var info = {
          actualUser:data.carInfo.actualUser,
          carInfoId:data.carInfoId,
          id:data.id,
          mileage:data.mileage,
          mileagePic:data.mileagePic,
          orderStatus:data.orderStatus,
          outgoingNo:data.outgoingNo,
          plateNo:data.plateNo,
          plateNoPic:data.plateNoPic,
          repairPayment:data.repairPayment,
          repairType:data.repairType
        };
        console.log(info)
        updateJc(info).then(response => {
          var _data = response.data;
          console.log(_data)
          if(_data.status == 200) {
            that.$message.success('修改成功');
          }else {
            that.$message.error('发生错误');
          }

        }).catch(error => {
          that.$message.error('发生错误');
          console.log(error)
        })
      }
		}
	}
</script>

<style lang="css" scoped>
	.pick-info {
		margin-left: -4px;
    height: 727px;
	}
	.truck-info {
		margin-left: 3px;
		border-radius: 8px;
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
		overflow: hidden;
	}
	.truck-info-1 {
		height: 352px;
	}
	.truck-info-1-head {
		height: 22px;
		border-radius: 8px 8px 0 0;
		background-color: rgba(246, 247, 248, 1);
		padding: 16px 12px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 16px;
		font-family: PingFangSC-Medium;
		font-weight: 550;
	}
	.truck-info-1-body{
		padding: 9px 14px;
	}
	.truck {
		height: 173px;
	}
	.truck>div{
		width: 160px;
		float: left;
	}
	.truck-input {
		/* text-indent:1px; */
		font-family: PingFangSC-Medium;
		width: 100px;
		border: none;
		outline: medium;
		color: white;
		background-color: rgba(37, 40, 49, 1);
		font-size: 20px;
		margin-left: 5px;
	}
	.repair-kinds{
		padding-top: 24px;
		height: 41px;
		border-bottom: 1px solid rgba(220, 220, 220, 1);
	}
	.btn-kinds {
		height: 26px;
		cursor: pointer;
		border-radius: 4px;
		line-height: 26px;
		text-align: center;
		width: 65px;
		font-size: 12px;
		display: inline-block;
    white-space: nowrap;
	}
	.add-kinds-btn {
		margin-left: 10px;
		border: 1px dashed rgba(170, 170, 170, 1);
		color: rgba(170, 170, 170, 1);
	}
	.other-kinds-btn {
		border: 1px solid rgba(250, 140, 22, 1);
		background-color: rgba(250, 140, 22, 0.1);
		color: rgba(250, 140, 22, 1);
		margin-left: 6px;
	}
  .add-repair-type-btn-pick {
		border: 1px solid rgba(250, 140, 22, 1);
		background-color: rgba(250, 140, 22, 0.1);
		color: rgba(250, 140, 22, 1);
    margin: 10px 7px;
  }
  .add-repair-type-btn-no-pick {
		border: 1px solid rgba(153, 153, 153, 1);
		background-color: rgba(242, 243, 244, 1);
		color: rgba(153, 153, 153, 1);
    margin: 10px 7px;
  }
	.appear {
		color: rgba(51, 51, 51, 1);
	}
	.truck-info-2 {
		height: 148px;
		margin-top: 8px;
	}
	.table-key {
		color: rgba(51, 51, 51, 0.6);
		font-size: 12px;
	}
	.table-value {  
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 0.8);
		font-size: 14px;
	}
	.truck-info-3 {
		height: 40px;
		margin-top: 8px;
	}
	.truck-info-btn {
		margin-left: 5px;
		margin-top: 8px;
	}
  .repair-type-pay-add {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.6);
    height: 727px;
    width: 360px;
    /* top: 0; */
    top: 345px;
    right: 12px;
    border-radius: 8px;
    overflow: hidden;
  }
  .show-add {
    padding: 10px 0 16px 3px;
    width: 328px;
    margin-left: 13px;
    background-color: white;
    border-radius: 8px;
  }
</style>
